<template>
  <div class="wrap">
    <h5>选择装修的页面</h5>
    <el-menu
      :default-active="pathOnly"
      class="el-menu-vertical-demo"
      @select="handleOpen"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item 
        v-for="(item,index) in allPageData"
        :index="item.pageRouter"
        :key = "index"
      >
        <i class="el-icon-menu"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    path: String,
  },
  data() {
    return {
      allPageData: [],
      pathOnly: this.path, // 当前路径

    }
  },
  mounted() {
    this.allPageData = this.$store.state.allPageData
  },
  methods: {
    // 路由跳转
    jumptRoute(routerName) {
      if (routerName == 'Home') {
        this.$router.push({
          path: `/${this.$route.params.website_id}`,
        })
        return;
      }
      this.$router.push({
        path: `/${this.$route.params.website_id}/${routerName}`,
      })
    },
    handleOpen(routerName) {
      console.log(routerName)
      let allPageData = this.allPageData;
      let currentPage = {};
      allPageData.forEach((ele,index)=> {
        if (ele.pageRouter == this.pathOnly) {
          currentPage = ele;
        }
      })
      
      this.$confirm('是否保存已更改的' + currentPage.title + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消修改下一页',
        type: 'warning',
      }).then(() => {
        let state = {};
        // state名称 = 当前页面名称 + Data
         state = this.$store.state[this.pathOnly + 'Data'];
        this.axios.post('/interfaces/mini_apps/upd',{
          id: currentPage.id,
          json: JSON.stringify(state)
        }).then((response)=> {
          if (response.data.code == 200) {
              this.$message({
              type: 'success',
              message: response.data.message,
            });
           
          } else {
            this.$message({
              type: 'info',
              message: response.data.message
            });      
          }
          this.jumptRoute(routerName);
        })
       
      }).catch(()=> {
        this.jumptRoute(routerName);
      })
      

      console.log('打开网页健身房拉进来',routerName)
    }
  }
}
</script>

<style lang="less">
  .left-contt {
    h5 {
      font-size: 19px;
      color: #fff;
      margin: 0;
      margin-top: 10px;
    }
    width: 200px;
    height: 100vh;
    background: rgb(84, 92, 100);
  }
  .right-con {
    margin-left: 80px;
  }
</style>